<template>
	<div class="setting-user">
		<div v-if="showAlert">
			<alertCarousel :id="id" @close="close" @change="change">
			</alertCarousel>
		</div>
		<div class="carousel-list">
			<div class="carousel-item" v-for="(item,index) in list">
				<img class="carousel-img" :src="item.image" @click="openToEdit(item,index)">
			</div>
		</div>
		<sub-foot :prompt="prompt" :loading="loading" @saveChange="open" msg="新增"></sub-foot>
	</div>
</template>

<script>
	import SubFoot from 'components/setting/sub-foot'
	import alertCarousel from 'components/alert/carousel'

	export default {
		data() {
			return {
				prompt: '该设置将控制轮播图',
				loading: false,
				showAlert: false,
				list: [],
				url: 'carousel',
				id: 0,
				index: -1
			}
		},
		created() {
			this.__getData()
		},
		methods: {
			open() {
				this.loading = true
				this.showAlert = true
			},
			close() {
				this.showAlert = false
				this.loading = false
				this.id = 0	
				this.index = -1
			},
			change(item) {
				if(this.index !== -1) {
					this.list[this.index] = item
				}else{
					this.list.push(item)
				}
			},
			openToEdit(item, index){
				this.id = item.id
				this.index = index
				this.open()
			},
			__getData() {
				this.$http.get(this.url).then((response)=>{
					this.list = response.data.data
				})
			}
		},
		components: {
			SubFoot,alertCarousel
		}
	}
</script>

<style scope>
	.carousel-list>div{
		display: inline-block;
		width: 31.33333%;
		text-align: center;
		margin: 10px 1%;
	}
	.carousel-list>.carousel-item>.carousel-img {
		max-width: 100%;
		max-height: 100%;
		cursor: pointer;
	}

	.carousel-list>.carousel-item>.carousel-img:hover {
		filter:alpha(opacity=70);
	    opacity:0.70;
	    -moz-opacity:0.70;
	    -khtml-opacity: 0.70;
	    border-radius: 10px;
	}

</style>